<template>
  <div class="edit_box">
    <el-scrollbar>
      <el-form
        ref="csForm"
        class="csForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="120px"
      >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="单据编号：" prop="fWorksheetCode">
              <el-input
                v-model="pageData.formData.fWorksheetCode"
                placeholder="请输入单据编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据名称：" prop="fWorksheetName">
              <el-input
                v-model="pageData.formData.fWorksheetName"
                placeholder="请输入单据名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系统分类：" prop="fSystemId">
              <el-select
                v-model="pageData.formData.fSystemId"
                placeholder="请选择系统分类"
                style="width: 100%"
                @change="gettypelistquery"
              >
                <el-option
                  v-for="item in pageData.SystemId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据分类：" prop="fWorksheetTypeName">
              <!-- <el-input
                v-model="pageData.formData.fProductSpec"
                placeholder="请输入规格"
              /> -->
              <el-select
                v-model="pageData.formData.fWorksheetTypeName"
                placeholder="请选择单据分类"
                style="width: 100%"
                @visible-change="selectManufacturer"
                @change="settypeid"
              >
                <el-option
                  v-for="item in pageData.manufacturer"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单号编码方式：" prop="fAutoNo">
              <el-switch v-model="pageData.formData.fAutoNo" active-value='0' inactive-value='1' />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单号前缀：" prop="fPrefix">
              <el-input
                v-model="pageData.formData.fPrefix"
                placeholder="请输入单号前缀"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="编码日期格式：" prop="fUseDate">
              <el-select
                v-model="pageData.formData.fUseDate"
                placeholder="请选择日期格式"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.UseDate"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流水号长度：" prop="fStreamLength">
              <el-input
                v-model="pageData.formData.fStreamLength"
                placeholder="请输入流水号长度"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="冻结码：" prop="fRozone">
              <el-switch v-model="pageData.formData.fRozone" active-value="0" inactive-value="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="录入人员：">
              <el-input
                v-model="pageData.formData.fCreateUserName"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
                placeholder="自动填充"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="录入时间：">
              <el-input
                v-model="pageData.formData.fCreatorTime"
                autocomplete="off"
                :disabled="!pageData.isAdd || pageData.isAdd"
                placeholder="自动填充"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input
                v-model="pageData.formData.fRemark"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取消</el-button>
        <el-button type="primary" @click="onHandleSure"> 提交 </el-button>
      </el-col>
    </el-row>

    <!-- 选择装备参数 -->
    <el-dialog
      :width="800"
      title="选择装备参数"
      v-model="pageData.selectParamVisible"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
      custom-class="editDialog-class"
    >
      <selectmtrparam
        @ok="onParamCallbackOk"
        :isAdd2="pageData.isAdd2"
        @cancel="() => (pageData.selectParamVisible = false)"
      />
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, ref, watch } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import { Plus, Delete, ArrowDown } from "@element-plus/icons-vue";
import selectmtrparam from "@/components/select/selectmtrparam.vue";
import { add_xzrecei,typelist_xzrecei,details_xzrecei,update_xzrecei, } from "@/api/basic/receitsnature"


export default {
  components: { Plus, Delete, ArrowDown, selectmtrparam },

  props: {
    modifyObj: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      pageData.formData = {
        fAuditUserId: "",
        fAuditorTime: "",
        fAutoNo:'1',
        fBookCode: "",
        fCheckOrder:0,
        fCloseCode:0, 
        fCosType: 0,
        fCreateUserId: "", 
        fId: "",
        fCreatorTime: "", 
        fLastModifyTime: "",
        fLastModifyUserId: "",
        fOrderType: 0, 
        fPrefix: "", 
        fPrintTimes: 0, 
        fRozone: '1', 
        fStreamLength:'', 
        fSystemId: '', 
        fUseDate:0,
        fWorksheetCode: "", 
        fWorksheetName: "", 
        fStreamBy: "",
        fWorksheetType:'', 
        fRemark: "",
        fState: 0,
        fStock: 0,
      }
    });

    // 表单绑定返回的数据
    const csForm = ref();

    let pageData = reactive({
      // value1:0,
      // value2:1,
      typelistquery:'',
      UseDate:[
        {id:0,name:'年'},
        {id:10,name:'月'},
        {id:20,name:'日'},
        {id:30,name:'不作日期'},
      ],
      SystemId:[
        {id:1,name:'基本信息'},
        {id:2,name:'销售管理'},
        {id:3,name:'采购管理'},
        {id:4,name:'库存管理'},
        {id:5,name:'生产管理'},
        {id:6,name:'应收管理'},
        {id:7,name:'应付管理'},
        {id:-1,name:'其他'},
      ],
      formData: {
        // productParams: [],
      },
      formRules: {
        fWorksheetCode: [
          { required: true, message: "请输入单据编号", trigger: "blur" },
        ],
        fWorksheetName: [
          { required: true, message: "请输入单据名称", trigger: "blur" },
        ],
        fSystemId: [
          { required: true, message: "请选择系统分类", trigger: "blur" },
        ],
        fWorksheetType: [
          { required: true, message: "请选择单据分类", trigger: "blur" },
        ],
        fPrefix: [
          { required: true, message: "请输入单号前缀", trigger: "blur" },
        ],
        fUseDate: [
          { required: true, message: "请选择日期格式", trigger: "blur" },
        ],
        fStreamLength: [{ required: true, message: "请输入流水号长度", trigger: "blur" }],
      },

      isAdd: props.isAdd,
      currentRow: {},
      selectParamVisible: false, //选择装备参数弹窗
    });

    // 选择时间开始
    const size = (ref < "default") | "large" | ("small" > "default");
    const shortcuts = [];

    const disabledDate = (time) => {
      return time.getTime() > Date.now();
    };
    // 选择时间结束

    // 获取单据列表参数id
    const gettypelistquery = (val)=>{
      console.log('获取单据列表参数id',val)
      pageData.typelistquery = val
    }

    // 查询单据列表
    const selectManufacturer = () => {
      typelist_xzrecei(pageData.typelistquery)
        .then((res) => {
          console.log("单据列表", res);
          pageData.manufacturer = res;
        })
        .catch((error) => {
          console.log("装备类别报错error", error);
          ElMessage.error('请先选择系统分类');
        });
    };
    const settypeid = (val)=>{
      typelist_xzrecei(pageData.typelistquery)
        .then((res) => {
          let ii = res.filter((v)=>{
            return v.id == val
          })
          pageData.formData.fWorksheetType = ii[0].id
        })
        .catch((error) => {
          console.log("装备类别报错error", error);
          ElMessage.error('请先选择系统分类');
        });
    }


    const onHandleCancel = () => {
      csForm.value?.resetFields();
      context.emit("cancel");
    };
    // 查询装备详情
    if (!props.isAdd) {
      details_xzrecei(props.modifyObj.fId) //查询装备详情
        .then((res) => {
          console.log('res',res)
          pageData.formData = res;
          pageData.formData.fAutoNo = res.fAutoNo.toString()
          pageData.formData.fRozone = res.fRozone.toString()
          console.log("pageData.formData", pageData.formData);
          console.log("121212", res);

          // pageData.formData.productParams = res[0].productParams;
          // console.log(
          //   "pageData.formData.productParams",
          //   pageData.formData.productParams
          // );

          // pageData.formData.fPIsSerial = res[0].fPIsSerial.toString();
        })
        .catch((error) => {
          ElMessage.error(error.message || "请求出错");
        });
    }

    // 提交
    const onHandleSure = () => {
      // console.log(pageData.formData);
      csForm.value?.validate((valid) => {
        if (valid) {
          const loading = ElLoading.service({
            lock: true,
            background: "rgba(0, 0, 0, 0.7)",
          });
          if (props.isAdd) {
            pageData.formData.fCreatorTime = new Date(
              pageData.formData.fCreatorTime
            );
            console.log("新增", pageData.formData);
            add_xzrecei(pageData.formData)
              .then((res) => {
                console.log("新增", pageData.formData);
                console.log("返回的数据", res);

                loading.close();
                context.emit("ok", {
                  isAdd: props.isAdd,
                  retObj: pageData.formData,
                });
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");

                console.log("error", error);
              });
          } else {
            pageData.formData.fCreatorTime = new Date(
              pageData.formData.fCreatorTime
            );
            update_xzrecei(pageData.formData)
              .then((res) => {
                console.log("pageData.formData", pageData.formData);
                console.log("装备编辑", res);
                loading.close();
                context.emit("ok", {
                  isAdd: props.isAdd,
                  retObj: pageData.formData,
                });
              })
              .catch((error) => {
                console.log("error", error);
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          }
        } else return false;
      });
    };

    return {
      csForm,
      pageData,
      size,
      shortcuts,
      disabledDate,
      onHandleCancel,
      onHandleSure,
      selectManufacturer,
      gettypelistquery,
      settypeid
    };
  },
};
</script>

<style lang="scss">
.edit_box {
  height: 100%;
  background-color: white;
  .csForm {
    width: calc(100% - 6px);
  }
}
</style>
